<template>
  <div id="jobList">
    <el-input size="small" @keyup.enter.native="searchHandle" style="width: 300px" v-model="keywords"
              placeholder="搜索职位"></el-input>
    <el-button @click="searchHandle()" style="margin-left: 10px" type="primary" icon="el-icon-search" size="small">搜索
    </el-button>
    <el-button @click="dialogFormVisible = true" style="margin-left: 10px" type="primary" icon="el-icon-plus" size="small">添加职位
    </el-button>
    <el-table
        height="536"
        :data="jobList"
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 99.5%">
      <el-table-column
          label="序号"
          align="center"
          type="index"
          :index="indexMethod">
      </el-table-column>
      <el-table-column
          label="职位名称"
          prop="jobName"
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="所在城市"
          align="center"
          show-overflow-tooltip>
        <template slot-scope="scope">
          {{codeToCity(scope.row.cityCode)}}
        </template>
      </el-table-column>
      <el-table-column
          label="招聘数量"
          align="center"
          show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.recruitNumber }}人
        </template>
      </el-table-column>
      <el-table-column
          label="薪资范围"
          align="center"
          show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.minSalary }}K-{{ scope.row.maxSalary }}K
        </template>
      </el-table-column>
      <el-table-column
          label="职位状态"
          align="center"
          show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.jobState == 1 ? '上架' : '下架' }}
        </template>
      </el-table-column>
      <el-table-column
          label="发布时间"
          prop="createTime"
          sortable
          align="center"
          width="170%"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
          width="260%">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="修改" placement="top" >
            <el-button style="margin-left: 10px" @click="editHandler(scope.row)" type="primary" size="mini" icon="el-icon-edit"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="上架" placement="top" >
            <el-button v-show="scope.row.jobState == 0" style="margin-left: 10px" @click="disableHandle(scope.row.jobId,scope.row.jobName,scope.row.jobState)" type="warning" size="mini" class="iconfont icon-xiajiaxiawu"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="下架" placement="top" >
            <el-button v-show="scope.row.jobState == 1" @click="disableHandle(scope.row.jobId,scope.row.jobName,scope.row.jobState)" type="success" size="mini" class="iconfont icon-shangjia"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="详细信息" placement="top" >
            <el-button @click="detailInfo(scope.row)" class="iconfont icon-xiangqing" size="mini" type="success"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="删除" placement="top" >
            <el-button @click="deleteHandle(scope.row.jobId,scope.row.jobName)" size="mini" icon="el-icon-delete"
                       type="danger"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        align="center"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :hide-on-single-page="value"
        style="padding-top: 15px"
    >
    </el-pagination>
    <el-dialog title="职位详细信息" center :visible.sync="detailInfoVisible" width="60%" :close-on-click-modal="false"
               :lock-scroll="false">
      <el-descriptions direction="horizontal" :column="3" size="small" border>
        <el-descriptions-item>
          <template slot="label">
            职位名称
          </template>
          {{ job.jobName }}
        </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          薪资范围
        </template>
        {{ job.minSalary }}K-{{ job.maxSalary }}K
      </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            工作城市
          </template>
          {{ codeToCity(job.cityCode) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            职位属性
          </template>
          {{ job.property==1?'校园招聘':'社会招聘' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            工作形式
          </template>
          {{ job.jobPattern }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            所需经验
          </template>
          {{ job.experience }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            最低学历
          </template>
          {{ job.minEdu }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            招聘数量
          </template>
          {{ job.recruitNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            职位类型
          </template>
          {{ job.jobCategory }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            所需专业
          </template>
          {{ job.professional }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label">
            福利
          </template>
          {{ job.welfare }}
        </el-descriptions-item>
        <el-descriptions-item :sapn="3" label-style="width:90px">
          <template slot="label">
            职位描述
          </template>
          {{ job.jobInfo }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-dialog title="添加职位" :visible.sync="dialogFormVisible"  top="0" width="40%" :before-close="reset">
      <el-form :model="infoForm" ref="infoForm" :rules="rules" >
        <el-form-item label="职位名称" :label-width="formLabelWidth" prop="jobName">
          <el-input  v-model="infoForm.jobName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="所在城市" :label-width="formLabelWidth" prop="cityCode">
          <el-cascader
              :options="options"
              v-model="selectedOptions"
              filterable
              placeholder="请选择"
              @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="职位属性" :label-width="formLabelWidth" prop="jobProperty">
          <el-select v-model="infoForm.jobProperty" placeholder="请选择">
            <el-option key="0" label="社会招聘" value="0"></el-option>
            <el-option key="1" label="校园招聘" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位类型" :label-width="formLabelWidth" prop="jobCategory">
          <el-select v-model="infoForm.jobCategory" placeholder="请选择">
            <el-option
                v-for="item in jobCategory"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所需专业" :label-width="formLabelWidth" prop="professional">
          <el-input v-model="infoForm.professional" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="招聘数量" :label-width="formLabelWidth" prop="recruitNumber">
          <el-input type="number" v-model="infoForm.recruitNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最低薪资" :label-width="formLabelWidth" prop="minSalary">
          <el-input  type="number"  placeholder="单位为K" v-model="infoForm.minSalary" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="最高薪资"  :label-width="formLabelWidth" prop="maxSalary">
          <el-input type="number"  placeholder="单位为K" v-model="infoForm.maxSalary" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="工作形式" :label-width="formLabelWidth" prop="jobPattern">
          <el-input   placeholder="全职/兼职/实习" v-model="infoForm.jobPattern" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="所需经验" :label-width="formLabelWidth" prop="experience">
          <el-input  maxlength="5" v-model="infoForm.experience" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="最低学历" :label-width="formLabelWidth" prop="minEdu">
          <el-input   v-model="infoForm.minEdu" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="福利待遇" :label-width="formLabelWidth" prop="welfare">
          <el-input v-model="infoForm.welfare" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职位描述" :label-width="formLabelWidth" prop="jobInfo">
          <el-input  type="textarea" :row="50" v-model="infoForm.jobInfo" maxlength="255"   show-word-limit autocomplete="off" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addJob">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addCompanyJob, delJob, getJobList, shelveJob, updateCompanyJob,} from "../../network/companyUser";
import {CodeToText, provinceAndCityData} from 'element-china-area-data'
import jobCategory from "@/untils/jobCategoryList"
export default {
  name: "JobManage",
  data() {
    return {
      jobCategory:jobCategory,
      options: provinceAndCityData,
      selectedOptions: [],
      jobList: [],
      job: {},
      loading: true,
      keywords: '',
      value: false,
      currentPage: 1,
      total: 1,
      pageSize: 9,
      detailInfoVisible: false,
      companyName:'',
      dialogFormVisible:false,
      infoForm: {
        jobId:'',
        companyName:'',
        userName:"",
        realName:'',
        jobName:'',
        cityCode:'',
        recruitNumber: '',
        minSalary: '',
        maxSalary: '',
        jobProperty: '',
        jobPattern: '',
        experience:'',
        minEdu:'',
        jobCategory:'',
        professional:'',
        welfare:'',
        jobInfo:''
      },

      rules: {
        jobName: [{required: true,trigger:'blur',message:'职位名称不能为空'}],
      },
      formLabelWidth:"100px"
    }
  },

  created() {
    this.companyName= localStorage.getItem("company_companyName");
    this.infoForm.companyName = this.companyName;
    this.infoForm.realName = localStorage.getItem("company_realName");
    this.infoForm.userName = localStorage.getItem("company_userName");
    this.handleCurrentChange(this.currentPage);
  },
  methods: {
    handleChange(value) {
      if(CodeToText[value[1]]=='市辖区'){
        this.infoForm.cityCode=value[0];
      }else{
        this.city=CodeToText[value[1]];
        this.infoForm.cityCode=value[1];
      }
    },
    codeToCity(cityCode){
      return CodeToText[cityCode];
    },
    handleCurrentChange(currentPage) {
      getJobList(this.keywords, currentPage, this.pageSize,this.companyName).then(res => {
        this.loading = false;
        this.total = res.data.data.total;
        this.jobList = res.data.data.list;
        this.currentPage = currentPage;
      })
    },
    searchHandle() {
      this.currentPage = 1;
      this.handleCurrentChange(this.currentPage)
    },
    deleteHandle(jobId, jobName) {
      this.$confirm('你确定要删除职位"' + jobName + '"吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delJob(jobId).then(res => {
          this.$message.success('职位' + jobName + res.data.data);
          this.handleCurrentChange(this.currentPage)
        }).catch()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    disableHandle(jobId, jobName, jobState) {
      shelveJob(jobId).then(res => {
        if (res.data.code == 100) {
          this.$message.success('职位' + jobName + (jobState == 1 ? '下架' : '上架') + '成功');
        }
        this.handleCurrentChange(this.currentPage)
      }).catch()
    },
    indexMethod(index) {
      return (this.currentPage - 1) * this.pageSize + 1 + index;
    },
    detailInfo(job) {
      this.detailInfoVisible = true;
      this.job = job;
    },
    addJob(){
      if(this.infoForm.minSalary>this.infoForm.maxSalary){
        this.$message.warning("最低工资不能低于最高工资");
        return;
      }
      if(this.infoForm.jobId!==""){ updateCompanyJob(this.infoForm).then(res => {
        this.$refs.infoForm.resetFields();
        this.$message.success(res.data.data);
        this.searchHandle();
      })
      }else{
        this.$refs.infoForm.validate(valid=>{
          if(valid){
            addCompanyJob(this.infoForm).then(res => {
              this.$refs.infoForm.resetFields();
              this.$message.success(res.data.data);
              this.searchHandle();
            }).catch();
          }
        })
      }
      this.dialogFormVisible = false;
    },
    editHandler(job){
          this.infoForm.jobId=job.jobId;
          this.infoForm.companyName=localStorage.getItem("company_companyName");
          this.infoForm.userName=localStorage.getItem("company_userName");
          this.infoForm.realName=localStorage.getItem("company_realName");
          this.infoForm.jobName=job.jobName;
          this.infoForm.recruitNumber=job.recruitNumber;
          this.infoForm.minSalary=job.minSalary;
          this.infoForm.maxSalary=job.maxSalary;
          this.infoForm.jobPattern=job.jobPattern;
          this.infoForm.experience=job.experience;
          this.infoForm.minEdu=job.minEdu;
          this.infoForm.professional=job.professional;
          this.infoForm.welfare=job.welfare;
          this.infoForm.jobInfo=job.jobInfo;
        this.dialogFormVisible = true;
    },
    reset(done){
      this.infoForm.jobId="";
      this.infoForm.jobName='';
      this.infoForm.recruitNumber='';
      this.infoForm.minSalary='';
      this.infoForm.maxSalary='';
      this.infoForm.jobPattern='';
      this.selectedOptions=[];
      this.infoForm.experience='';
      this.infoForm.minEdu='';
      this.infoForm.professional='';
      this.infoForm.welfare='';
      this.infoForm.jobInfo='';
      this.infoForm.cityCode='';
      this.infoForm.jobProperty='';
      this.infoForm.jobCategory='';
      done();
    }
  }
}

</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  min-width: 130px;
  height: 50px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-left: 50px;
  margin-bottom: 0;
  width: 40%;
}

.el-form-item__content {
  height: 50px;
}
</style>